import React, { Component } from 'react'
import './index.css'
class Index extends Component {
    state = {

    }
    canvasDom = null
    ctx = null
    componentDidMount() {
        this.canvasDom = document.querySelector('#canvasIndex')
        this.canvasDom.width = window.innerWidth
        this.canvasDom.height = window.innerHeight
        this.ctx = this.canvasDom.getContext('2d');
        this.init()
        // this.draw()
        // this.saveAndRestore()
        // this.transform()
        this.clip()
    }
    init() {
        let { ctx, canvasDom } = this

    }
    draw() {
        let { ctx, canvasDom } = this
        /* 绘制线段 */
        ctx.beginPath(); //新建一条path
        ctx.moveTo(50, 50); //把画笔移动到指定的坐标-
        ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
        //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
        ctx.closePath();
        ctx.stroke(); //绘制路径。   


        ctx.beginPath(); //新建一条path
        ctx.moveTo(50, 150); //把画笔移动到指定的坐标
        ctx.lineTo(200, 150);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
        //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
        ctx.closePath();
        ctx.stroke(); //绘制路径。           
        /* 绘制线段 */


        /* 绘制圆弧 */
        ctx.beginPath()
        ctx.arc(50, 300, 40, -1.55, Math.PI, false);
        ctx.stroke();
        /* 绘制圆弧 */
        /* 绘制圆弧2 */
        ctx.beginPath();
        ctx.moveTo(50, 50);
        //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
        ctx.arcTo(200, 50, 200, 200, 100);
        ctx.lineTo(200, 200)
        ctx.stroke();
        
        ctx.beginPath();
        // ctx.rect(50, 50, 10, 10);
        // ctx.rect(200, 50, 10, 10)
        // ctx.rect(200, 200, 10, 10)
        ctx.fill()        
        /* 绘制圆弧2 */
    }
    // 状态的保存和恢复
    saveAndRestore() {
        let { ctx, canvasDom } = this
 
        ctx.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形
        ctx.save();                  // 保存默认状态
     
        ctx.fillStyle = 'red'       // 在原有配置基础上对颜色做改变
        ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形
     
        ctx.save();                  // 保存当前状态
        ctx.fillStyle = '#FFF'       // 再次改变颜色配置
        ctx.fillRect(30, 30, 90, 90);   // 使用新的配置绘制一个矩形
     
        ctx.restore();               // 重新加载之前的颜色状态
        ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置绘制一个矩形
     
        ctx.restore();               // 加载默认颜色配置
        ctx.fillRect(60, 60, 30, 30);   // 使用加载的配置绘制一个矩形
    }
    clip () {
        let { ctx, canvasDom } = this
        ctx.beginPath();
        ctx.arc(10,10, 100, 0, Math.PI * 2);
        // ctx.stroke();
        ctx.clip();
     
        ctx.fillStyle = "pink";
        ctx.fillRect(20, 20, 100,100);        
    }
    // transform (变形矩阵)
    transform () {
        let { ctx, canvasDom } = this
        ctx.transform(1, 1, 0, 1, 0, 0);
        ctx.fillRect(0, 0, 100, 100);
    }
    render() {
        return (
            <div>
                <canvas id="canvasIndex"></canvas>
            </div>
        )
    }
}
export default Index

// canvas知识点
/* 
这两个都能闭合路径
ctx.stroke(); // 绘制路径。   
ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。


*/